<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
import SKIN from '@/skin/skin'
export default{
  name: 'App',
  computed: {
    skin: function() {
      return this.$store.state.user.skinStyle
    }
  },
  watch: {
    skin: function() {
      console.log('=============skin==========' + this.skin)
      if (this.skin === null || this.skin === undefined || this.skin === '') {
        this.addCss(SKIN.DEFAULT)
      } else {
        this.addCss(this.skin)
      }
    }
  },
  mounted: function() {
    console.log('apppppppppppppppppp')
    var savedStyle = localStorage.getItem('savedstyle')
    console.log(savedStyle)
    if (this.skin === null || this.skin === undefined || this.skin === '') {
      if (savedStyle === null || savedStyle === undefined) {
        this.addCss(SKIN.DEFAULT)
      } else {
        this.addCss(savedStyle)
      }
    } else {
      this.addCss(this.skin)
    }
  },
  methods: {
    addCss: function(css) {
      const id = 'chalk'
      let styleTag = document.getElementById(id)
      if (!styleTag) {
        styleTag = document.createElement('style')
        styleTag.setAttribute('id', id)
        document.head.appendChild(styleTag)
      }
      styleTag.innerText = css
    }
  }
}
</script>
